document.addEventListener("DOMContentLoaded", () => {
    const $app = document.querySelector(`#app`);
    // 从核心包中引入画布、Circle 等对象
    const { Circle, Rect, Line, Group, Canvas, Canvas2D } = G;
    // 创建一个渲染器，这里使用 Canvas2D
    const canvasRenderer = new Canvas2D.Renderer();
    // 创建画布
    const canvas = new Canvas({
        container: $app,
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight,
        renderer: canvasRenderer,
    });
    const width = 200;
    const height = 200;
    const cx = document.documentElement.clientWidth / 2;
    const cy = document.documentElement.clientHeight / 2;
    const x = cx - width / 2;
    const y = cy - height / 2;
    // 原点坐标
    const origin = [x + width / 2 , y + height / 2];
    // 是否旋转中
    let rotating = false;
    let aVector = null;
    let bVector = null;

    const shape_controls = new Rect({
        style: {
            x,
            y,
            width,
            height,
            fill: "transparent",
            stroke: "#000000",
            lineWidth: 1,
        }
    });

    const shape_anchor = new Circle({
        style: {
            r: 4,
            x: cx,
            y: y,
            fill: "rgb(255, 255, 255)",
            stroke: "rgb(6, 123, 239)",
            lineWidth: 1,
        }
    });

    const shape_rotater = new Circle({
        style: {
            r: 4,
            x: cx,
            y: y - 30,
            fill: "rgba(255, 255, 255, 1)",
            stroke: "rgba(6, 123, 239, 1)",
            lineWidth: 1,
        }
    });

    const line = new Line({
        style: {
            x1: cx,
            y1: y - 26,
            x2: cx,
            y2: y - 4,
            fill: "transparent",
            stroke: "#000000",
            lineWidth: 1,
        }
    });

    const group = new Group({
        style: {
            origin,
        }
    });
    group.appendChild(shape_controls);
    group.appendChild(shape_anchor);
    group.appendChild(shape_rotater);
    group.appendChild(line);

    canvas.appendChild(group);

    /**
     * 计算向量夹角，单位是弧度
     * @param {Array.<2>} av 
     * @param {Array.<2>} bv 
     * @returns {number}
     */
     function computedIncludedAngle(av, bv) {
        return Math.atan2(av[1], av[0]) - Math.atan2(bv[1], bv[0]);
    }

    shape_rotater.addEventListener("mouseover", () => {
        $app.classList.add("rotating");
    });

    shape_rotater.addEventListener("mouseout", () => {
        $app.classList.remove("rotating");
    });

    shape_rotater.addEventListener("mousedown", (e) => {
        rotating = true;
        const { offsetX, offsetY } = e;
        aVector = [offsetX - origin[0], offsetY - origin[1]];
    });

    canvas.addEventListener("mousemove", (e) => {
        if (!rotating) {
            return;
        }
        $app.classList.add("rotating");
        const { offsetX, offsetY } = e;
        bVector = [offsetX - origin[0], offsetY - origin[1]];
        const angle = computedIncludedAngle(aVector, bVector);
        group.rotateLocal(-angle * 180 / Math.PI);
        aVector = bVector;
    });

    canvas.addEventListener("mouseup", () => {
        rotating = false;
        $app.classList.remove("rotating");
    });
});